<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>

<script type="text/javascript">
</script>
<script type="text/javascript">
    $(document).ready(function() {
        sort();
    });
</script>
<!-- Menu -->
<jsp:include page="menu.jsp" />

<div class="content">
    <div class="insider">
        <div class="search_box">
            <form action="search.html" method="get">

                <input type="hidden" name="lookupType" value="${param['lookupType']}" />

                <ul class="fl">
                    <li>
                        <select name="groupName">
                            <option value="">Group:All</option>
                            <c:forEach var="group" items="${groups}">
                                <option value="${group}" ${group == param['groupName'] ? 'selected' : ''}>${group}</option>
                            </c:forEach>
                        </select>
                    </li>
                    <li></li>
                    <li></li>

                    <li class="word_box">
                        <input type="text" id="keywords"  name="keywords" value="${not empty param['keywords'] ? param['keywords'] : 'Search by Keywords...'}"
                               onclick="searchClean(this)" />
                    </li>
                </ul>

                <ul class="fr">

                    <li>
                        <input type="image" class="btn" src="<%= request.getContextPath()%>/images/btn/btn_search3.gif"
                               onclick="searchClean($('#keywords'))" />
                    </li>
                </ul>
            </form>
        </div>

        <div class="error">
            <h3>
                ${foundMessage}
                ${empty message ? '' : '<br />'}${message}</h3>
            <div class="display_mode">
                <h4>Display mode:</h4>
                <ul>
                    <li id="brief" onclick="briefMode();"><a href="#">Brief</a></li>
                    <li id="full" class="active" onclick="fullMode();"><a href="#">Full</a></li>
                </ul>
            </div>
        </div>

        <ul class="functions2">
            <security:authorize ifAnyGranted="ROLE_GROUP_ADMIN,ROLE_SYS_ADMIN">
                <li class="fr">
                    <a href="create.html?lookupType=${param.lookupType}" class="retire">
                        <img src="<%= request.getContextPath()%>/images/btn/btn_create_new.gif" width="127" height="21" alt="text" class="btn" />
                    </a>
                </li>
            </security:authorize>
            <li>
                <a href="#" onclick="clickAction('view')">
                    <img src="<%=request.getContextPath()%>/images/btn/functions2/btn_view.gif"
                         alt="view" class="btn" />
                </a>
            </li>

            <li>
                <security:authorize ifAnyGranted="ROLE_GROUP_ADMIN,ROLE_SYS_ADMIN">
                    <a href="#" onclick="clickAction('edit')">
                        <img src="<%=request.getContextPath()%>/images/btn/functions2/btn_edit.gif"
                             alt="view" class="btn" />
                    </a>
                </security:authorize>
            </li>
        </ul>

        <table width="100%" cellspacing="0" class="data_thead">
            <thead>
                <tr>
                    <th width="25%" column="code" class="${(column == 'code' and order=='asc')?'id_move_up' : (column == 'code' and order=='desc')?'id':''} sort">ID</th>
                    <th width="35%" column="userGroup.name" class="${(column == 'userGroup.name' and order=='asc')?'id_move_up' : (column == 'userGroup.name' and order=='desc')?'id':''} sort">Group</th>
                    <th width="40%" column="description" class="${(column == 'description' and order=='asc')?'id_move_up' : (column == 'description' and order=='desc')?'id':''} end sort">Description</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

        <div id="dataList" class="data_tbody">
            <c:forEach var="lookup" items="${lookups}">
                <div onclick="itemClick(this, 'code=${lookup.code}&lookupType=${param.lookupType}');" onmouseover="itemHover(this);"
                     onmouseout="itemMouseOut(this);">
                    <table width="100%" cellspacing="0" class="data_tbody_title">
                        <tbody>
                            <tr>
                                <td width="25%" class="id_number">${lookup.code}</td>
                                <td width="35%">${lookup.userGroup.name}</td>
                                <td width="40%"><c:out value="${lookup.description}" /></td>
                            </tr>
                        </tbody>
                    </table>
                    <table width="726" border="0" cellspacing="0" class="tro">
                        <tr>
                            <td width="200">User: ${lookup.modifiedBy.username}</td>
                            <td class="end">
                                Last Modified:
                                <fmt:formatDate value="${lookup.modifiedOn}" pattern="MM/dd/yyyy" />
                            </td>
                        </tr>
                    </table>
                </div>
            </c:forEach>
        </div>

        <!-- Pagination -->
        <%@include file="../../template/pager.jsp" %>
    </div>
</div>